import React from "react";
import { Row, Col } from "antd";
import { connect } from "react-redux";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import createSelect from "./createSelect";

function mapStateToProps(state) {
  return {
    apiProviders: state.apiProvider,
  };
}
@connect(mapStateToProps)
class CaculateOption extends React.PureComponent {
  getSelectOptions = (property, options) => ({
    onChange: this.props.onChange,
    data: this.props.data,
    property,
    getter: (data, property) => data.get(property),
    options,
  });

  renderNumber() {
    return (
      <>
        <Row className="row">
          <div className="label">
            <FormattedMessage {...messages.propertyPanelType} />
          </div>
          {createSelect(
            this.getSelectOptions("operation", [
              { label: "+", value: "+" },
              { label: "-", value: "-" },
              { label: "*", value: "*" },
              { label: "/", value: "/" },
            ])
          )}          
        </Row>
      </>
    );
  }

  renderDate=() => {
    return null;
  }

  render() {
    const { data } = this.props;
    const isnumber = data.get("type") === "number";
    return (
      <>
        <Row className="row">
          <Col span={10}>
            <span className="label">
              <FormattedMessage {...messages.propertyPanelType} />
            </span>
          </Col>
          <Col span={14}>
            {createSelect(
              this.getSelectOptions("type", [                
                { label: "数字", value: "number" },
                { label: "日期", value: "date" },
              ])
            )}
          </Col>
        </Row>
        {isnumber ? this.renderNumber() : this.renderDate()}
      </>
    );
  }
}

export default function createCaculateOptions(config = {}) {
  const { onChange, onUpdate, data } = config;
  return (
    <CaculateOption
      onChange={onChange} onUpdate={onUpdate}
      data={data}
    />
  );
}
